<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>{$ip}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="__PACKAGE__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PACKAGE__/layuiadmin/style/admin.css">
    <link rel="stylesheet" href="__CSS__/index.css">
</head>

<body>

    <div class="layui-tab layui-tab-brief frame" style="padding: 0;margin: 0;position: relative;">
        <div style="position: absolute;
        right: 27px;
        top: 10px;
        font-size: 18px;
        color: #6fbe85;">
            {$ip}
        </div>

        <ul class="layui-tab-title">
            <li class="layui-this">统计分析</li>
            <li>调用记录</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!-- 统计分析 -->
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="count" style="width: 100%;height: 190px;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="averageCost" style="width: 100%;height: 190px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="successCount" style="width: 100%;height: 190px;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="errorCount" style="width: 100%;height: 190px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <!-- 调用记录 -->
                <table id="tracingList" lay-filter="tracingList"></table>
            </div>
        </div>
    </div>

</body>

</html>
<!--JS引用-->
<script src="__JS__/jquery.min.js"></script>
<script src="__PACKAGE__/layui/layui.js"></script>
<script src="__JS__/index.js"></script>
<script src="__JS__/echarts.min.js"></script>
<script>
    $(function () {
        countObject = echarts.init(document.getElementById('count'));
        averageCostObject = echarts.init(document.getElementById('averageCost'));
        successCountObject = echarts.init(document.getElementById('successCount'));
        errorCountObject = echarts.init(document.getElementById('errorCount'));

        chartList = eval("(" + `{$chartList}` + ")");

        statistics('请求数', chartList.time, chartList.count, 'rgb(126,211,244)', countObject);
        statistics('响应时间', chartList.time, chartList.averageCost, 'rgb(250,200,88)', averageCostObject);
        statistics('成功数', chartList.time, chartList.successCount, 'rgb(145,204,117)', successCountObject);
        statistics('异常数', chartList.time, chartList.errorCount, 'rgb(255,112,112)', errorCountObject);
    });

    function statistics(title, x, y, color, object) {
        var option = {
            title: {
                text: title,
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                confine: true,
                position: function (point, params, dom, rect, size) {
                    return [point[0], '10%'];
                },
                extraCssText: 'width:150px;'
            },
            dataZoom: [{
                type: 'slider',
                height: 15,
                bottom: '5%',
            }],
            grid: {
                top: '15%',
                left: '1%',
                right: '1%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: x
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: title,
                    data: y,
                    type: 'line',
                    smooth: true,
                    color: color,
                }
            ]
        };

        object.setOption(option);
    }

    // 调用记录
    table.render({
        elem: '#tracingList',
        size: 'sm',
        even: true,
        height: 400,
        loading: true,
        url: "{:url('/project_ip_tracing_list',['project'=>$project,'ip'=>$ip,'date'=>$date])}",
        method: 'POST',
        page: true,
        limit: 10,
        parseData: function (params) {
            return {
                "code": params.code,
                "msg": params.msg,
                "count": params.data.total,
                "data": params.data.tracingList
            };
        },
        request: {
            pageName: 'page',
            limitName: 'limit'
        },
        response: {
            statusCode: 200
        },
        cols: [[
            { field: 'time', title: '调用时间', width: 160 },
            { field: 'transfer', title: '调用入口', minWidth: 320 },
            { field: 'ip', title: 'IP', width: 150 },
            { field: 'costTime', title: '耗时', width: 100, templet: '#costTime' },
            { field: 'success', title: '状态', width: 70, templet: '#success' },
            { field: 'trace', title: 'trace', width: 120, templet: '#trace' }
        ]]
    });

    // 查看详情
    $('body').on('click', '.details', function () {
        var details = $(this).attr('details');

        top.layer.open({
            type: 1,
            title: false,
            anim: 5,
            scrollbar: false,
            resize: false,
            move: false,
            offset: 'auto',
            area: ['80%', '80%'],
            skin: 'open-skin',
            content: `<pre class="layui-code" lay-title="详细信息" lay-skin="notepad">` + details + `</pre>`,
            success: function (layero, index) {
                top.layui.code({
                    elem: 'pre'
                });
            }
        });
    });
</script>
<script type="text/html" id="success">
    {{#  if(d.success === 1){ }}
    <i class="layui-icon layui-icon-circle-dot" style="font-size: 20px; color: #7ecf51;"></i>
    {{#  } else { }}
    <i class="layui-icon layui-icon-circle-dot" style="font-size: 20px; color: #e16757;"></i>
    {{#  } }}
</script>
<script type="text/html" id="costTime">
    {{d.costTime}}ms
</script>
<script type="text/html" id="trace">
    <a href="javascript:;" style="color: #0066cc;" class="details" details='{{d.details}}'>{{d.trace}}</a>
</script>